<template>
  <div class="form-content">
    <!-- 表格查询 -->
    <div class="table-search">
      <el-form :inline="true" ref="form" :rules="rules" :model="formInline" class="demo-form-inline">
        <el-form-item prop="imei">
          <el-input v-model="formInline.imei" clearable placeholder="请输入IMEI"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="form-main">
      <!-- 表头标题 -->
      <div class="tb_title">告警数据</div>
      <!-- 表格 -->
      <div class="listfile">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :height="tableHeight"
          :data="tableData">
          <el-table-column prop="imei" label="IMEI" width="160"></el-table-column>
          <el-table-column  prop="statusLv" label="警告等级" width="100">
            <template slot-scope="scope">
              <div class="block"><img width="20px" :src="urlMap[scope.row.status]"/></div>
              <!-- <div :style="{color: colorMap[scope.row.status]}">{{ scope.row.statusLv.split('+')[0]}}  </div> -->
            </template>
          </el-table-column>
          <el-table-column prop="batMv" label="电量" ></el-table-column>
          <el-table-column prop="rssi" label="信号值" ></el-table-column>
          <el-table-column prop="rfid" label="标签" width="200"></el-table-column>
          <el-table-column prop="createTime" label="告警时间" width="180"></el-table-column>
          <el-table-column prop="projectName" label="项目名称" width="260" show-overflow-tooltip></el-table-column>
          <el-table-column prop="deviceName" label="设备名称" width="160" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column prop="rep_time" label="间隔时间" ></el-table-column> -->
          <el-table-column prop="deviceCode" label="自定义编码" width="100"></el-table-column>
          <el-table-column prop="projectType" label="项目类型" width="100">
            <template slot-scope="scope">
              <span> {{projectType[ scope.row.projectType]}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="userName" label="用户" width="100"></el-table-column> -->
          <!-- <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" icon="el-icon-star-off" type="warning" size="mini">查看</el-button>
              <el-button
                size="mini" type="primary" icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger" icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="table_page">
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>

    </div>

    <!-- 子组件 -->
  </div>
</template>

<script>
import { warningData, warningDataSearch } from '@/api/device'
  export default {
    data() {
      const validImei = (rule, value, callback)=> {
        console.log(rule,value)
          if(value && value.trim().length > 4) {
            callback()
          } else {
            callback(new Error('IMEI不能少于5位'))
          }
      }
      return {
        tableHeight: 'calc(100vh - 296px)',
        totalCount: 0, //总条数，总共有多少条数据
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示多少条
        addEdit_data: {},
        loading: true,
        projectType: {
         1: '水利',
         2: '文保',
         3: '江堤',
         4: '其他'
        },
        colorMap:{
          0: '#259b24',
          1: '#0082f6',
          2: '#ffeb3b',
          3: '#e51c23',
          4: '#d16800'
        },
        urlMap:{
          0: require('../../assets/homewarn/level0.png'),
          1: require('../../assets/homewarn/level1.png'),
          2: require('../../assets/homewarn/level2.png'),
          3: require('../../assets/homewarn/level3.png'),
          4: require('../../assets/homewarn/level4.png')
        },
        tableData: [],
        formInline: {
          imei: ''
        },
        rules: {
          imei: [ {validator: validImei, trigger: 'blur'}]
        }
      }
    },
    methods: {
      // 新增--保存后，子传给父组件
      submitAddChange (data) {
        // this.loadListData(); // 条件查询
        addProject(data).then(res => {
          if(res.statusCode == '200'){
            this.$message.success(`项目添加成功`)
            this.currentPage = 1
            this.loadData()
          }else {
            this.$message.error(`项目添加失败！`)
           }
        }).catch()
      },
      //添加
      add(){
        this.$refs.projectModal.modal1 = true;
        this.$refs.projectModal.title_name = '添加项目';
      },
      //用户查询
      search() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.currentPage = 1
            this.loadData()
          }
        })
      },
      //编辑
      handleEdit(index, row) {
        this.addEdit_data = JSON.parse(JSON.stringify(row));
        this.$refs.projectModal.modal1 = true;
        this.$refs.projectModal.title_name = '编辑用户';
        console.log("编辑:", index, row, this.addEdit_data);
      },
      // 分页
      handleCurrentChange(newPage) {
        this.currentPage = newPage
        this.loadData()
      },
      //每页
      handleSizeChange(val) {
        this.pageSize = val
        this.loadData()
      },
      loadData(){
        if( this.formInline.imei) {
          let imei = this.formInline.imei.substr(this.formInline.imei.length -5, 5)
          warningDataSearch({
            imei: imei,
            userId: this.$store.state.user.id,
            status: this.$store.state.user.userInfo.status,
            accountType:  this.$store.state.user.accountType,
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          }).then(res => {
            this.tableData = res.data.content;
            this.totalCount = res.data.total
          }).catch()
        } else {
          warningData({
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            userId: this.$store.state.user.id,
            status: this.$store.state.user.userInfo.status,
            accountType:  this.$store.state.user.accountType
          }).then(res => {
            this.tableData = res.data.content;
            this.totalCount = res.data.total;
          }).catch()

        }
      }

    },
    created(){
      this.loadData()
    },
    mounted(){
      this.loading = false;

    },
    destroyed() {
      this.$destroy();
      this.historyData = [];
      this.page_Data = [];
    },
     watch: {
      formInline: {
        handler: function(val){
          if(val.imei) {

          } else {
            this.currentPage = 1
            this.loadData()
          }
        },
        deep: true
      }
    }
  }
</script>
